<template>
  <div class="main-container">
    <el-row>
      <el-button type="primary" icon="el-icon-plus" @click="dialogFormVisible = true">创建组</el-button>
    </el-row>
    <el-row>
      <el-table :data="tableData" v-loading="loading" border style="width: 100%">
        <el-table-column prop="id" label="组序号" width="150"></el-table-column>
        <el-table-column prop="name" label="组名称" width="350"></el-table-column>
        <el-table-column prop="gender" label="性别" width="150"></el-table-column>
        <el-table-column label="城市" width="400">
          <template slot-scope="scope">
            <el-tag
              size="medium"
              v-for="(city,index) in scope.row.citys"
              v-bind:key="index"
              style="margin-left: 10px;"
            >{{city}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="ageRange" label="年龄" width="150"></el-table-column>
        <el-table-column label="操作" width="200">
          <template slot-scope="scope">
            <el-col :span="12">
              <div style="text-align: center">
                <el-button type="danger" icon="el-icon-delete" @click="handleClick(scope.row.id)"></el-button>
              </div>
            </el-col>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    <!-- 弹出面板 -->
    <el-dialog title="新建组" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="用户组名" :label-width="formLableWidth">
          <el-col :span="7">
            <el-input v-model="form.name"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="选择用户性别" :label-width="formLableWidth">
          <el-select v-model="form.gender" placeholder="下拉选择性别">
            <el-option label="不限" default value="0"></el-option>
            <el-option label="男" value="1"></el-option>
            <el-option label="女" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="选择省份" :label-width="formLableWidth">
          <el-select v-model="form.citys" multiple placeholder="下拉选择省份">
            <el-option label="北京市" default value="北京市"></el-option>
            <el-option label="上海市" value="上海市"></el-option>
            <el-option label="天津市" value="天津市"></el-option>
            <el-option label="河北省" value="河北省"></el-option>
            <el-option label="四川省" value="四川省"></el-option>
            <el-option label="山西省" value="山西省"></el-option>
            <el-option label="江苏省" value="江苏省"></el-option>
            <el-option label="海南省" value="海南省"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="选择用户年龄范围" :label-width="formLableWidth">
          <el-col :span="5">
            <el-input-number
              v-model="form.minAge"
              controls-position="right"
              :min="0"
              :max="120"
              @change="minAgeChange"
            ></el-input-number>
          </el-col>
          <el-col :span="2" style="text-align: center">至</el-col>
          <el-col :span="5">
            <el-input-number
              v-model="form.maxAge"
              controls-position="right"
              :min="form.minAge"
              :max="120"
            ></el-input-number>
          </el-col>
          <el-col :span="2" style="text-align: center">岁</el-col>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleSubmit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import * as request from "@net";

export default {
  methods: {
    handleClick(id) {
      this.loading = true;
      request.delUserGroup(id, () => {
        this.$notify({
          title: "成功",
          message: "删除成功",
          type: "success"
        });
        this.fillTableData();
      });
    },
    minAgeChange() {
      if (this.form.maxAge < this.form.minAge) {
        this.form.maxAge = this.form.minAge;
      }
    },
    fillTableData() {
      this.tableData = [];
      request.findUserGroup("", ({ data }) => {
        data.map(userGroup => {
          switch (userGroup.gender) {
            case 0:
              userGroup.gender = "不限";
              break;
            case 1:
              userGroup.gender = "男";
              break;
            case 2:
              userGroup.gender = "女";
          }
          var ageRange = userGroup.ageRange.split(",");
          userGroup.ageRange = ageRange[0] + "至" + ageRange[1] + "岁";
        });
        this.tableData = data;
        this.loading = false;
      });
    },
    handleSubmit() {
      this.loading = true;
      var userGroup = this.form;
      // 拼接年龄范围
      userGroup.ageRange = userGroup.minAge + "," + userGroup.maxAge;
      request.saveUserGroup(userGroup, ({ msg })=> {
        this.$notify({
          title: "成功",
          message: msg,
          type: "success"
        });
        this.dialogFormVisible = false;
        this.fillTableData();
      });
      // 清空form

      //   this.form = {
      //     name: "",
      //     city: [],
      //     gender: "0",
      //     minAge: 0,
      //     maxAge: 0
      //   };
    }
  },
  data() {
    return {
      loading: true,
      tableData: [],
      dialogFormVisible: false,
      form: {
        name: "京津冀大学生组",
        citys: ["北京市", "天津市", "河北省"],
        gender: "0",
        minAge: 18,
        maxAge: 24
      },
      formLableWidth: "150px",
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            }
          }
        ]
      },
      timeRange: ""
    };
  },
  created() {
    this.fillTableData();
  }
};
</script>

<style>
.main-container {
  margin-left: 10px;
  margin-top: 15px;
}
.data-view-table {
  margin-top: 15px;
}
.el-row {
  margin-bottom: 20px;
}
</style>


